<!-- 二级菜单 -->
<template>
  <div class="menu-container" :class="{ 'menu-container-right': isArabic }" :style="{
    width: (submenuWhiteList.includes(state.currentMenu)&&menuHook.subMenuList.length!==1 ? '84px' : '0px'),
  }">
    <div @click="subMenuAction(item, i)" v-for="(item, i) in state.subMenuList" :key="item.name" :class="{
      'menu-item-active': state.subMenuList[selectSubMenu]?.name === item.name,
    }" class="menu-item">
      <template v-if="item.meta.isVisible">
        <svg-icon v-if="!item.meta.icon.includes('fa')" :name="item.meta.icon" width="30" height="30" />
        <i v-else :class="'fa ' + item.meta.icon" style="color: #11ccc1; font-size: 22px"></i>
        <span class="menu-title">
          {{ isCn ? item.meta.nameZh : isArabic ? item.meta.nameAr : item.meta.nameEn }}
        </span>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import hooks, { useLanguage } from "@/hooks/index";
import menuHook from "@/hooks/menuHook/menuHook";
const { isEn, isCn, isArabic } = useLanguage();
const props = defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
});
const showEmployeeSecondMenu = computed(() => {
  return hooks.menuHook.showEmployeeSecondMenu
})
//二级菜单可展示在中间


const store = useStore();
const router = useRouter();
let selectSubMenu: any = ref(0);
const state: any = reactive({
  menuList: props.menuList,
  isSidebarNavCollapse: computed(
    () => store.getters.getIsSidebarNavCollapse
  ),
  crumbList: computed(() => store.getters.getCrumbList),
  currentMenu: computed(() => store.getters.getCurrentMenu),
  currentPath: store.getters.getCurrentPath,
  subMenuList: [],
  isArabic: isArabic,
});
const submenuWhiteList = props.menuList && props.menuList.filter((o: any) => o.redirect).map((v: any) => v.name);
const updateMenuList = () => {
  let subMenuList: any = [];
  let menuList: any = state.menuList.length
    ? state.menuList
    : window.sessionStorage.getItem("MY_VUEX").crumbList;
  let currentMenu = state.currentMenu
    ? state.currentMenu
    : window.sessionStorage.getItem("MY_VUEX").currentMenu;
  selectSubMenu.value = 0;
  menuList?.forEach((item: any, i: number) => {
    if (item.name == currentMenu) {
      subMenuList = item.children || [];
      const crum = state.crumbList?.filter(
        (k: any) => k.name === hooks.menuHook.menuFirstChoose
      );
      if (crum && state.crumbList.length > 1) {
        item.children?.filter((v: any, i: number) => {
          if (v.name === state.crumbList[1].name) {
            selectSubMenu.value = i;
          }
        });
      }
    }
  });
  state.subMenuList = subMenuList;
  if (state.subMenuList.length) {
    menuHook.subMenuList = subMenuList
    router.push({ name: state.subMenuList[selectSubMenu.value].name });
  }
};
//解决浏览器后退问题
watch(() => hooks.menuHook.menuFirstChoose, (v) => {
  let menuList = state.menuList.length
    ? state.menuList
    : window.sessionStorage.getItem("MY_VUEX").crumbList;
  const res: any = menuList?.filter((k: any) => k.name === v)
  hooks.menuHook.menuFirstChoose = v
  store.commit('SET_MENU_FIRST_CHOOSE', v)
  state.subMenuList = res[0]?.children;
}, { deep: true, immediate: true })

const subMenuAction = (sub: any, i: number) => {
  // console.log("subMenuAction===================>", sub);
  selectSubMenu.value = i;
  router.push({ name: sub.name });
};

updateMenuList();

// 当前路由路径的引用
const currentPath = ref(router.currentRoute.value.path);

watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    // currentPath.value = newPath;
    // 在这里处理路由变化，例如更新页面标题等
    let path = newPath;
    let arr = path.split("/");
    let pathKey = arr[arr.length - 1];
    state.subMenuList?.forEach((item, index) => {
      if (item.path == pathKey) {
        selectSubMenu.value = index;
      }
    });
  },
  { immediate: true }
);

watch(
  () => state.currentMenu,
  (newVal) => {
    store.dispatch("menuSetting/SET_SHOWEMP_STATE", false); //清除页面二级菜单
    updateMenuList();
  },
  {
    deep: true,
  }
);
// const coo: any = sessionStorage.getItem('currentPath')


</script>

<style lang="scss" scoped>
@import "@/styles/theme/mixin";

.menu-container {
  position: fixed;
  top: 90px;
  bottom: 0;
  background-color: var(--bg-left-ming);
  overflow-y: scroll;
  @include noScrollBar();

  .menu-item {
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;

    .menu-item-box {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      text-align: center;
    }

    .menu-title {
      color: #fff;
      font-size: 10px;
      margin-top: 5px;
      word-wrap: break-word;
      width: 5vw;
      font-weight: normal !important;

    }
  }

  .menu-item:hover {
    border-left: 5px solid #fff;
    word-wrap: break-word;
  }
}

.menu-container-right {
  position: fixed;
  top: 90px;
  bottom: 0;
  right: 0;
  background-color: var(--bg-left-ming);
}
</style>
